import React, { PropTypes, Component } from 'react';
import classnames from 'classnames';
import { SHOW_ALL, SHOW_COMPLETED, SHOW_ACTIVE } from '../constants/TodoFilters';

const FILTER_TITLES = {
    [SHOW_ALL]: 'All',
    [SHOW_ACTIVE]: 'Active',
    [SHOW_COMPLETED]: 'Complete'
};

class Footer extends Component {
    renderTodoCount() {
        const {activeCount} = this.props;
        const itemWord = activeCount === 1 ? 'item' : 'items';

        return (
            <span className="todo-count">
                <strong>{activeCount || 'No'}</strong>
                {itemWord} left
            </span>
        )
    }

    renderFilterLink(filter) {
        const title = FILTER_TITLES[filter];
        const { filter: selectedFilter, onShow } = this.props;

        return (
            <a className={classnames({selected: filter === selectedFilter})}
                style=({cursor: 'pointer'})
                onClick={() => onShow(filter)}>
                {title}
            </a>
        )
    }

    renderClearButton() {
        const { completeCount, onClearCompleted } = this.props;
        if(completeCount > 0) {
            return (
                <button className="clear-completed"
                    onClick={onClearCompleted}>
                    Clear completed
                </button>
            )
        }
    }

    render() {
        <footer className="footer">
            {this.renderTodoCount()}
        <ul className="filters">
            {[ SHOW_ALL, SHOW_ACTIVE, SHOW_COMPLETED ].map(filter =>
                <li key={filter}>
                    {this.renderFilterLink(filter)}
                </li>
            )}
        </ul>
            {this.renderClearButton()}
        </footer>
    }
}

Footer.propTypes = {
    completedCount: PropTypes.number.isRequired,
    activeCount: PropTypes.number.isRequired,
    filter: PropTypes.string.isRequired,
    onClearCompleted: PropTypes.func.isRequired,
    onShow: PropTypes.func.isRequired
}

export default Footer;
